<script setup lang="ts">
import {PlayStatus, useAudioPlayerStore} from "@/stores"
import PlayLogo from '@/assets/qqimgs/btn-play.svg'
import PauseLogo from '@/assets/qqimgs/btn-pause.svg'


const playStore = useAudioPlayerStore()

const handlePlayBtn = () =>{
  if(playStore.status !== PlayStatus.playing)
  {
    playStore.play()
  }
  else {
    playStore.pause()
  }
}

</script>

<template>
  <div class="icon-btn-play" v-if="playStore.status !== PlayStatus.playing">
    <img :src="PlayLogo" @click="handlePlayBtn" alt="播放" title="播放"/>
  </div>
  <div class="icon-btn-pause" v-else>
    <img :src="PauseLogo" @click="handlePlayBtn" alt="暂停" title="暂停" />
  </div>

</template>

<style lang="scss" scoped>
.icon-btn-play {
  height: 36px;
  width: 36px;
  //background: url('@/assets/qqimgs/cover_play_light.svg') ;
}

.icon-btn-pause {
  height: 36px;
  width: 36px;
}
</style>